<!-- <ion-header>
  <ion-toolbar>
    <ion-title>APR-CALCULATE</ion-title>
  </ion-toolbar>
</ion-header> -->
<app-common-header [title]="'APR CALCULATE'"></app-common-header>
<ion-content>
  <div class="content">
    <ion-grid>
      <ion-row>
        <ion-col size="12">
          <div class="item_height item_back_color item_center">
            <ion-grid>
              <ion-row>
                <ion-col size="12">
                  <div class="ion-text-center" style="font-size: 18px;font-weight: 700;">
                    <ion-text color="">
                      Translation to APR
                    </ion-text>
                  </div>
                </ion-col>
              </ion-row>
              <ion-row>
                <ion-col size="12">
                  <div class="ion-text-center" style="font-size: 36px;font-weight: 700;">
                    <ion-text color="">
                      9.39%
                    </ion-text>
                  </div>
                </ion-col>
              </ion-row>
            </ion-grid>
          </div>
        </ion-col>
      </ion-row>
    </ion-grid>
    <ion-grid>
      <ion-row>
        <ion-col size="12">
          <div class="item_center item_back_color">
            <ion-grid>
              <ion-row class="col_bottom">
                <ion-col size="6" class="ion-text-left col_title">
                  <ion-text color="">
                    Payment Schedule
                  </ion-text>
                </ion-col>
                <ion-col size="6" class="ion-text-right col_val" (click)="openPicker()">
                  <ion-text color="">
                   {{periods}}
                  </ion-text>
                  <svg class="icon" aria-hidden="true">
                    <use xlink:href="#iconpage-right"></use>
                  </svg>
                </ion-col>
              </ion-row>
              <ion-row>
                <ion-col size="6" class="ion-text-left col_title">
                  <ion-text color="">
                    Monthly Rate
                  </ion-text>
                </ion-col>
                <ion-col size="6" class="ion-text-right col_val">
                  <ion-text color="">
                    0.43%
                  </ion-text>
                </ion-col>
              </ion-row>
            </ion-grid>
          </div>
        </ion-col>
      </ion-row>
    </ion-grid>
    <ion-grid>
      <ion-row>
        <ion-col size="12">
          <div>
            <ion-text color="" class="comment">
              The converted annualized interest rate value is for reference only, the actual annualized interest rate
              may be different from the reference value due to the difference in transaction time, repayment time, etc.,
              and the above annualized interest rate is not applicable if the repayment is not in accordance with the
              contract
            </ion-text>
          </div>
        </ion-col>
      </ion-row>
    </ion-grid>
  </div>
</ion-content>